<script setup>
import { ref } from 'vue'
// 仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。 例如， foo 是顶层属性，但 object.foo 不是。
const object = { foo: ref(1) }

// 我们可以通过将 foo 改成顶层属性来解决这个问题：
const { foo } = object

console.log(foo);
</script>

<template>
    <!-- 渲染的结果会是一个 [object Object]，因为 object.foo 是一个 ref 对象。 -->
    <p>{{ "object.foo + 1 = " + object.foo + 1 }}</p>
    
    <p>{{ "foo + 1 = " + foo + 1 }}</p>

    <!-- 这样也可以 -->
    <p>{{ "object.foo + 1 = " + object.foo.value + 1 }}</p>
</template>